<!-- created at 2018/4/10 by BlueSky @cilicili -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>上传 - cilicili</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="js/libs/jquery-3.2.1.js"></script>
  <script src="js/utils/utils.js"></script>
  <script src="js/utils/ajaxBase.js"></script>
  <script src="js/utils/ajaxLogin.js"></script>
  <script src="js/utils/ajaxVideo.js"></script>
  <script src="js/utils/ajaxStatus.js"></script>
  <script src="js/utils/ajaxUpload.js"></script>
</head>
<body>
<div id="nav_vue"></div>
<div id="upload_vue" class="container">
  <template v-if="login">
    <div class="row clearfix">
      <div class="col-md-12 text-center">
        <h1>上传视频</h1>
      </div>
    </div>
    <div v-if="!uploadFinished" class="row clearfix">
      <div class="col-md-12 text-center">
        <br>
        <form name="videoform" style="display: none">
          <input name="file" @change="selectVideo" id="videofile" type="file" accept=".mp4">
        </form>
        <button class="btn btn-primary" onclick="$('#videofile').click()">选择视频文件</button>
      </div>
    </div>
    <div v-if="!uploadFinished" class="row clearfix">
      <div class="col-md-8 col-md-offset-2 text-center">
        <br>
        <div v-if="totalInfo.length > 0" :class="['alert', 'alert-' + totalInfoColor]" style="overflow-wrap: break-word">
          {{totalInfo}}</div>
      </div>
    </div>
    <template v-if="videoSelected">
      <div v-if="!uploadFinished" class="row clearfix">
        <div class="col-md-8 col-md-offset-2 text-center">
          <table class="table table-striped">
            <thead>
            <tr>
              <th class="text-center">视频信息</th>
              <th class="text-center">填写详情</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>视频标题（50字 以内）</td>
              <td><input class="form-control" type="text" v-model="videofile.title" minlength="1" maxlength="50"></td>
            </tr>
            <tr>
              <td>视频描述（500字 以内）</td>
              <td><input class="form-control" type="text" v-model="videofile.description" minlength="1" maxlength="500">
              </td>
            </tr>
            <tr>
              <td>封面图</td>
              <td>
                <form name="imageform" style="display: none">
                  <input name="file" @change="selectImage" id="imagefile" type="file" accept=".png">
                </form>
                <button v-if="!imageSelected" class="btn btn-info" onclick="$('#imagefile').click()">
                  选择图片文件
                </button>
                <img v-if="imageData.length > 0" :src="imageData" onclick="$('#imagefile').click()"
                     width="300" height="200" style="cursor: pointer" title="点击重新选择封面图">
                <p style="margin-top: 10px; max-width: 500px; overflow-wrap: break-word">{{imageInfo}}</p>
              </td>
            </tr>
            </tbody>
          </table>
          <button :class="['btn', 'btn-success', uploadClicked ? 'disabled' : '']" @click="upload">上传</button>
        </div>
      </div>
      <div class="row clearfix">
        <div class="col-md-6 col-md-offset-3 text-center">
          <br>
          <div v-if="uploadInfo.length > 0" :class="['alert', 'alert-' + uploadInfoColor]">
            {{uploadInfo}}
          </div>
          <a v-if="uploadFinished" class="btn btn-primary" :href="'/video.htm?id=' + id">查看视频</a>
        </div>
      </div>
    </template>
  </template>
  <template v-else>
    <div class="row clearfix">
      <div class="col-md-offset-2 col-md-8 text-center">
        <div class="text-center alert alert-danger">未登录或登录已失效，请登录后查看</div>
        <br>
        <button class="btn btn-success" onclick="window.location='index.htm'">返回主页</button>
        <br>
      </div>
    </div>
  </template>
</div>
<div id="footer_vue"></div>

<script src="js/libs/bootstrap.js"></script>
<script src="js/libs/vue.js"></script>

<script src="js/vue/nav_vue.js"></script>
<script src="js/vue/footer_vue.js"></script>
<script>
  
  const upload_vue = new Vue({
    el: '#upload_vue'
    , data: {
      login: LOGIN_STATUS.status === true
      , videofile: {
        title: ''
        , url: ''
        , picUrl: ''
        , uploadUserid: ''
        , description: ''
      }
      , imageData: ''
      , videoSelected: false
      , totalInfo: '请选择 mp4 视频文件'
      , totalInfoColor: 'danger'
      , imageInfo: ''
      , uploadInfo: '等待上传'
      , uploadInfoColor: 'danger'
      , imageSelected: false
      , uploadClicked: false
      , uploadFinished: false
      , id: '-1'
    }
    , methods: {
      selectVideo(e) {
        if (e.target.files[0] === undefined) {
          this.videoSelected = false;
          this.totalInfo = '请选择 mp4 视频文件';
          this.totalInfoColor = 'danger';
          return;
        }
        let videosize = e.target.files[0].size;
        if (videosize >= 52428800) {
          this.videoSelected = false;
          this.totalInfo = '所选文件大小超过上限 50M，请重新选择';
          this.totalInfoColor = 'danger';
          this.videofile.title = '';
          this.videofile.description = '';
        } else {
          this.videoSelected = true;
          this.totalInfo = '已选择 ' + e.target.files[0].name;
          this.totalInfoColor = 'success';
          this.videofile.title = e.target.files[0].name.replace('.mp4', '').substr(0,40);
          this.videofile.description = '';
        }
      }
      , selectImage(e) {
        this.imageData = '';
        if (e.target.files[0] === undefined) {
          this.imageInfo = '请选择封面图文件';
          this.imageSelected = false;
          return;
        }
        let imagesize = e.target.files[0].size;
        if (imagesize >= 52428800) {
          this.imageInfo = '所选图片大小超过上限 50M，请重新选择';
          this.imageSelected = false;
        } else {
          this.imageInfo = '已选择 ' + e.target.files[0].name;
          this.imageSelected = true;
          let imageReader = new FileReader();
          imageReader.onload = (event) => {
            this.imageData = event.target.result;
          };
          imageReader.readAsDataURL(e.target.files[0]);
        }
      }
      , upload() {
        this.uploadInfo = '';
        this.uploadInfoColor = 'danger';
        let imagefile = $('#imagefile')[0].value;
        if (this.videofile.title.trim().length === 0) {
          this.uploadInfo = '视频标题不能为空';
          return;
        }
        if (this.videofile.description.trim().length === 0) {
          this.uploadInfo = '视频描述不能为空';
          return;
        }
        if (!this.imageSelected) {
          this.uploadInfo = '封面图片未选择';
          return;
        }
        this.uploadClicked = true;
        this.uploadInfo = '正在上传 ...';
        this.uploadInfoColor = 'warning';
        let {status, msg, token} = ajaxLogin.apply("upload_file");
        if (status === undefined || status === "failure") {
          this.uploadInfo = msg || '网络连接异常';
          this.uploadInfoColor = 'danger';
        } else if (status === "success") {
          utils.setCookie("apply", token);
        }
        let url = "";
        ({status, msg, url} = ajaxUpload.upload(new FormData(document.forms['imageform'])));
        if (status === undefined || status === "failure") {
          msg = msg || '网络连接异常';
          this.uploadInfo = '图片上传失败：' + msg + '， 请刷新后重试';
          this.uploadInfoColor = 'danger';
          return;
        } else if (status === "success") {
          this.videofile.picUrl = url;
        }
        ({status, msg, token} = ajaxLogin.apply("upload_file"));
        if (status === undefined || status === "failure") {
          msg = msg || '网络连接异常';
          this.uploadInfoColor = 'danger';
          this.uploadInfo = msg;
        } else if (status === "success") {
          utils.setCookie("apply", token);
        }
        ({status, msg, url} = ajaxUpload.upload(new FormData(document.forms['videoform'])));
        if (status === undefined || status === "failure") {
          msg = msg || '网络连接异常';
          this.uploadInfo = '视频上传失败：' + msg + '， 请刷新后重试';
          this.uploadInfoColor = 'danger';
          return;
        } else if (status === "success") {
          this.videofile.url = url;
        }
        let video = {};
        ({status, msg, video} = ajaxVideo.add(this.videofile));
        if (status === undefined || status === "failure") {
          msg = msg || '网络连接异常';
          this.uploadInfo = msg + '， 请刷新后重试';
          this.uploadInfoColor = 'danger';
        } else if (status === "success") {
          this.uploadInfo = '视频上传成功';
          this.uploadInfoColor = 'success';
          this.id = video.id;
          this.uploadFinished = true;
        }
      }
    }
  })
</script>

</body>
</html>